<template>
  <div class="rbox">
    <div class="card">
      <h2>个人名片</h2>
      <p>账号：{{user.username}}</p>
      <p>昵称：{{user.name}}</p>
      <p>电话：{{user.cellphone}}</p>
      <p>Email：{{user.email}}</p>
      <ul class="linkmore">
        <li>
          <router-link to="/personal">
            <el-avatar size="large" :src="user.avatar" style="width: 100%; height: 100%;"></el-avatar>
          </router-link>
        </li>
        <li>
          <router-link to="/personal" style="color: #ffffff; line-height: 50px; width: 80px; text-align: center;">
            个人中心
          </router-link>
        </li>
        <li style="margin-left: 20px;">
          <a @click="logout" style="color: #ffffff; line-height: 50px; width: 80px; text-align: center;">退出登录</a>
        </li>
      </ul>
    </div>
    <div class="whitebg notice">
      <h2 class="htitle">热门公告</h2>
      <ul>
        <li v-for="item in noticeList" :key="item.id">
          <router-link :to="{ name: 'notice-details', params: { id: item.id} }">
            {{item.title}}
          </router-link>
        </li>
      </ul>
    </div>
    <div class="whitebg paihang">
      <h2 class="htitle">热门资讯</h2>
      <section class="topnews imgscale" v-if="informationList.length != 0">
        <img :src="informationList[0].img"><span>热烈庆祝本站成立</span>
      </section>
      <ul>
        <li v-for="item in informationList" :key="item.id">
          <i></i>
          <router-link :to="{ name: 'information-details', params: { id: item.id} }">
            {{item.title}}
          </router-link>
        </li>
      </ul>
    </div>
    <div class="whitebg tongji">
      <h2 class="htitle">关于我们</h2>
      <ul>
        <li><b>建站时间</b>：{{about.creatDate}}</li>
        <li><b>电话</b>：{{about.cellphone}}</li>
        <li><b>邮箱</b>：{{about.email}}</li>
        <li><b>地址</b>：{{about.address}}</li>
        <li><b>简介</b>：{{about.introduce}}</li>
      </ul>
    </div>
    <div class="ad whitebg imgscale">
      <ul>
        <img :src="about.img">
      </ul>
    </div>
    <div class="links whitebg">
      <h2 class="htitle">友情链接</h2>
      <ul>
        <li v-for="item in linksList" :key="item.id">
          <a :href="item.links" target="_blank">
            {{item.name}}
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getUser } from '@/api/user'
  import { listLimitNotice } from '@/api/notice'
  import { listLimitInformation } from '@/api/information'
  import { allLinks } from '@/api/links'
  import { dynamicGetAbout } from '@/api/about'

  export default {
    computed: {
      ...mapGetters([
        'userId'
      ])
    },
    data() {
      return {
        user: {},
        noticeList: [],
        informationList: [],
        linksList: [],
        about: {},
      }
    },
    created(){
      this.getUser()
      this.listLimitNotice()
      this.listLimitInformation()
      this.allLinks()
      this.dynamicGetAbout()
    },
    methods: {
      getUser() {
        getUser(this.userId).then(response => {
          this.user = response.data
        })
      },
      listLimitNotice() {
        listLimitNotice("read_count", "desc", 5).then(response => {
          this.noticeList = response.data
        })
      },
      listLimitInformation() {
        listLimitInformation("read_count", "desc", 5).then(response => {
          this.informationList = response.data
        })
      },
      allLinks() {
        allLinks().then(response => {
          this.linksList = response.data
        })
      },
      dynamicGetAbout() {
        const data = {}
        data.status = 1
        dynamicGetAbout(data).then(response => {
          this.about = response.data
        })
      },
      async logout() {
        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      },
    }
  }
</script>
